<template>
  <div class="number-grow-warp">
    <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
    <!-- <span v-model="flag" class="number-grow">亿</span> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  props: {
    time: {
      type: Number,
      default: 60
    },
    value: {
      type: Number,
      default: 2017
    }
  },
  methods: {
    numberGrow (ele) {
      let _this = this
      let step = parseInt((_this.value * 1) / (_this.time * 1))
      // let step = 3
      let current = 0
      let start = 0
      console.log(step)
      let t = setInterval(function () {
        start += step
        if (start > _this.value) {
          clearInterval(t)
          start = _this.value
          t = null
        }
        if (current === start) {
          return
        }
        current = start
        // ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
        ele.innerHTML = current
      }, 50)
    }
  },
  mounted () {
    this.numberGrow(this.$refs.numberGrow)
  }
}
</script>
<style>
.number-grow-warp{
 transform: translateZ(0);
}
.number-grow {
 font-size: 58px;
 color: #fff;
 letter-spacing: 5px;
 /*margin:110px 0 20px;
 display: block;
 line-height:64px;*/
}
</style>
